/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:28:54
 */

import FabricText from "@/myFabric/FabricText";
import { Input, Slider } from "antd";
import clsx from "clsx";
import { clamp, throttle } from "lodash";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import styles from "./toolFontSpace.module.less";


interface Iprops {
}

// 旋转
export default function ToolFontSpace() {

    const [visible, setVisible] = useState(false);
    const [disable, setDisable] = useState(false);
    const [fontSpace, setFontSpace] = useState(designTemplateEditorStore.fontSpace);

    useEffect(() => autorun(() => {
        const { activeObjectId, fontSpace, lock } = designTemplateEditorStore;
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject && activeObject.type === "i-text") {
            setDisable(lock);
            setFontSpace(fontSpace);
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    useEffect(() => autorun(() => {
        setFontSpace(designTemplateEditorStore.fontSpace);
    }), []);

    const activeObjectSpace = throttle((charSpacing: number) => {
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObject) {
            (activeObject as FabricText).charSpacing = charSpacing;
            designTemplateEditor.render();
        }
    }, 30);

    return (
        <div
            className={clsx(styles.toolFontSpace, visible && styles.visible, disable && styles.disable)}
        >
            <span className={styles.lable} >间距</span>
            <Slider
                className={styles.slider}
                min={0}
                max={100}
                value={fontSpace}
                onChange={v => {
                    activeObjectSpace(v);
                    designTemplateEditorStore.setFontSpace(v);
                }}
            />
            <Input
                key={fontSpace}
                className={styles.input}
                defaultValue={fontSpace}
                onPressEnter={e => {
                    designTemplateEditor.setFontSpace(Number((e.target as HTMLInputElement).value));
                }}
                onBlur={e => {
                    designTemplateEditor.setFontSpace(Number((e.target as HTMLInputElement).value));
                }}
                onWheel={e => {
                }}
            />
        </div>
    );

}